import React, { Component, Fragment } from 'react';
import { Card } from 'antd';
import {
  Form, Row, Col,
} from 'antd';
import LeftForm from './components/LeftForm';
import Result from './components/Result';
import styles from './index.less';

@Form.create()
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      result: 0,
    };
  }

  render() {
    const that = this;
    const {
      result,
    } = this.state;

    const leftFormProps = {
      handleSubmit(values) {
        console.log(values);
        that.setState({ result: values.area * values.unitPrice });
      },
    };

    const resultProps = {
      result,
    };

    return (
      <Fragment>
        <Card bordered={false}>
          <Row>
            <Col xs={10}>
              <LeftForm {...leftFormProps} />
            </Col>
            <Col xs={8} offset={4} style={{ height: '100%' }}>
              <Result {...resultProps} />
            </Col>
          </Row>
        </Card>
        <Card>
          农户在此输入品种（中油杂11、德油5号、新油4号、新油8号、新油9号、007）、面积、往年单价，获得本年收益预估。
        </Card>
      </Fragment>
    );
  }
}

export default Index;
